<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html study</title>
        <p>base标签定义基本的链接地址/链接目录</p>
        <base href="" target="">
        <p>link标签定义文档与外部资源之间的联系，常用于链接到样式表</p>
        <link rel="" type="" href="">
    </head>


    <body>       
        <a id="top">您转到了文档顶部</a><br />
        <hr />        <!--让浏览器显示一行水平线 -->
        <b>b是加粗的文本</b>
        <br />
        <strong>strong是加粗的文本</strong>
        <br />
        <big>big个是字体放大</big>
        <br />
        <em>em是斜体文本</em><!--这中间没有换行-->
        <i>i是斜体文本</i>
        <br />
        <small>small是缩小文本</small>
        <p>这个文本包含<sub>下标</sub></p>
        <p>这个文本包含<sup>上标</sup></p>
        
        <h4>预格式文本使用 pre 标签</h4>
        <pre>
        对空行和空格进行控制 

        空行  空格，也就是空行和空格在这里面浏览器不过滤掉</pre>
        <h4>code kbd tt samp var 常用于计算机/编程代码</h4>
        <code>code计算机输出</code>
        <br />
        <kbd>kbd键盘输入</kbd>
        <br />        
        <tt>tt打字机文本</tt>
        <br />
        <samp>samp计算机代码样本</samp>
        <h4>address显示地址</h4>
        <address>
        Write by <a href="">Jon Doe</a><br />
        Visit us at:<br />
        Example.com<br />
        Box 564, Disland<br />
        USA
        </address>
        <h4>abbr显示缩略词，鼠标放上面显示完整名称</h4>
        <abbr title="zhadaolong">zdl</abbr>
        <h4><bdo dir="rtl">该标题从右到左显示</bdo></h4>
        <h4>q块引用</h4>
        <q>此内容在块引用标签内，浏览器自动添加双引号</q>
        <h4>del删除和ins下划线效果</h4>
        <p>这是<del>删除效果</del>和<ins>下划线效果</ins></p>
        <h4>a链接和引用,id可用于创建HTML文档书签标签，跳转到指定id处</h4>
        <a href="#top">跳转到文档顶部</a><br />
        <a href="#bottom">跳转到文档底部</a><br />
        <a href="#top">图片链接<img src="DSC_0991.jpg" width="50"></a><br />
        <h4>head标签定义文档信息</h4>
        <h4 style="font-family: cursive;
        background-color: green;
        text-align: center">style引用样式</h4>
        
        <table border="1">
            <tr>
                <th>Header01</th>
                <th>Header02</th>
            </tr>
            <tr>
                <td>row01, cell01</td>
                <td>row01, cell02</td>
            </tr>
            <tr>
                <td>row02, cell01</td>
                <td>row02, cell02</td>
            </tr>
        </table>

        <h4>不同类型列表</h4>
        <ol>
            <li>Apple</li>
            <li>Pear</li>
            <li>Oranges</li>
        </ol>
        <ol type="I">
            <li>Apple</li>
            <li>Pear</li>
            <li>Oranges</li>
        </ol>
        <ul>
            <li>汽车</li>
            <li>公交车</li>
            <li>出租车</li>
        </ul>

        <ul> 
            <li>汽车</li>
            <li>公交车</li>
            <li>出租车</li>
        </ul>

        <h4>div设置区块内的属性</h4>
        <div style="color:blue">
            <p>div块内的段落</p>
            <p>div块内的段落</p>
            <p>div块内的段落</p>
        </div>

        <h4>表单操作</h4>
        <form>
            登录名：<input type="text" name="log in name"><br />
            密码：<input type="text" name="log in password">
        </form>
        <br />
        <form>
            <input type="radio" name="Sex" value="male">Male<br />
            <input type="radio" name="Sex" value="female">Female
        </form>
        <br />
        <form>
            <input type="checkbox" name="vehicle" value="bike">自行车<br/>
            <input type="checkbox" name="vehicle" value="car">汽车<br/>
        </form>
        <br/>
        <form>
            <input type="button" name="" value="Hello Word">输入按钮
        </form>
        <br/>
        <form>
            <fieldset>
                <legend>登录信息</legend>
                登录名：<input type="text" name="log in name"><br />
                密码：<input type="text" name="log in password">
            </fieldset>
        </form>
        <br/>
        <h4 style="color:springgreen">iframe建立一个内联的框架，显示另外一个页面</h4>
        <iframe src="html-div.html" width="800px" height="400px"></iframe>

        <br/>
        <script>
            document.write("这是由脚本标签打印到显示页面的")
        </script>
        <br />
        <font color="#00C000">
            这是使用&ltfont&gt显示的字体
        </font>
        <br />
        <span>span显示无差异</span>

        
        <br />
        <br />
        <br />
        <a id="bottom">您转到了文档底部</a><br />      
        
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;
height:20px;padding:40px;">
Mouse Over Me
</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>



    </body>
</html>